<template>
  <div>
    <el-dialog
      title="添加用户"
      :visible.sync="addUserVisible"
      width="40%"
      :show-close="false"
      :close-on-click-modal="false">
      <el-form ref="addUserForm" :model="addUserForm" :rules="addUserForm_rules" label-width="110px">
        <el-form-item label="id" prop="user_id">
          <el-input v-model="addUserForm.user_id" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="addUserForm.user_name" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password">
          <el-input type="password" v-model="addUserForm.user_password" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码" prop="user_password1">
          <el-input type="password" v-model="addUserForm.user_password1" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="user_nick_name">
          <el-input v-model="addUserForm.user_nick_name" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="user_email">
          <el-input v-model="addUserForm.user_email" size="small" placeholder="该邮箱只能绑定一个账号"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="user_sex">
          <el-select v-model="addUserForm.user_sex" style="width: 50%;">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="gr_id">
          <el-select v-model="addUserForm.group.gr_id" style="width: 50%;">
            <el-option v-for="(gr,n) in groupList"  :label="gr.gr_name" :value="gr.gr_id" :key="n"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="closeAddUser">取 消</el-button>
      <el-button size="mini" type="primary" @click="addUserInfo">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getAllUserByGroupId,updateUserByUserId,updateUserPasswordById,findUserByCondition,addUser} from '@/api/user'
  import {getAllGroup} from '@/api/permission'
  export default{
      props:["isShowAddDialog"],
      data(){
          return {
            addUserVisible:this.isShowAddDialog,
            addUserForm:{
                user_id:"",
                user_name:"",
                user_password:"",
                user_password1:"",
                user_nick_name:"",
                user_email:"",
                user_sex:"男",
                group:{
                    gr_id:null
                }
            },
            addUserForm_rules:{
              user_name:[{ required: true, message: '不能为空', trigger: 'change' },{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }],
              user_password:[{ required: true, message: '不能为空', trigger: 'change' },{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }],
              user_password1:[{ required: true, message: '不能为空', trigger: 'change' },{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }],
              user_email:[{ required: true, message: '不能为空', trigger: 'change' }, {type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change']}],
            },
            groupList:[]
          }
      },

      mounted(){
        this.getAllGroupList();
      },

      methods:{
          //关闭弹出框
          closeAddUser(){
             this.addUserVisible = false;
             this.$emit("addUserClose","add");
         },

         //提交数据进添加
        addUserInfo(){
          this.$refs["addUserForm"].validate((valid) => {
              if(valid){
                if(this.addUserForm.user_password == this.addUserForm.user_password1){
                  //调用后台接口进行用户添加
                  addUser(this.addUserForm).then(res=>{
                    if(res.data > 0){
                      this.$message({
                        message: '该用户名已存在',
                        type: 'warning'
                      });
                    } else if(res.data < 0){
                      this.$message({
                        message: '该邮箱已被绑定',
                        type: 'warning'
                      });
                    }else{
                      this.$message({
                        message: '注册成功',
                        type: 'success'
                      });
                      this.closeAddUser();
                    }
                  });
                }else{
                  this.$message({
                    message: '两次输入密码不一致',
                    type: 'warning'
                  });
                }
              }
          });
        },

        //获取所有角色信息
        getAllGroupList(){
          getAllGroup().then(res=>{
            if(res.code == 200){
              this.groupList = res.data;
              if(this.groupList.length > 0){
                  this.addUserForm.group.gr_id = this.groupList[0].gr_id;
              }
            }
          })
        },
      }
  }
</script>
